
 .main-header{
    height: 84px;
    background:rgba(0, 0, 0, .8)
  }
  .main-header .area{
    width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

  }
  .main-header .area .header-left{
    display : flex;

  }
  .main-header .area .header-left .header-logo a{
    display : block;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    width: 200px;
    height: 54px;
    text-indent: -999px;
    margin-right: 20px;
    background:url(./images/main_logo.png) no-repeat;
  }
  .main-header .area .header-left .nav-list{
    display: flex;
  }
  .area .header-left .nav-list .nav-item {
    display:flex;
    width: 115px;
    height: 64px;
  }
  .area .header-left .nav-list .nav-item:hover .title{
    border-bottom: 3px solid #e4b653;;
    background:url(./images//main_index.png);
  }
  .area .header-left .nav-list .nav-item .title{ 
    display: block;
    height:84px;
    width: 115px;
    box-sizing: border-box;
    padding-top: 20px;
    font-size: 18px;
    color: #c9c9dd;
    text-align: center;
  }
  .area .header-left .nav-list .nav-item .title .desc{
    margin-top: 5px;
    font-size: 12px;
    display: block;
  }
  .area .header-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:84px;
  }
  .area .header-right .login{
    display: flex;
    align-items: center;
    width: 182px;
  }
  .area .header-right .search{
    width: 27px;
    height: 26px;
    margin-right: 40px;
    background:url(./images/nav_search.png);

  } 
  .area .header-right .login-icon{
    display: block;
    width: 44px;
    height: 44px;
    margin-right: 7px;
    border: 1px solid #d9ad50;
    border-radius: 42px;
  }
  .area .header-right .login-title{
    display: block;
    color:#ffffff;
  }
  .area .header-right .login-title .login-desc{
    display:block;
    color: rgb(222, 206, 181);
    font-size: 14px;
  }
  .main-header:hover .dropdown{
    display: block;
    height: 285px;

  }
  .main-header .dropdown{
    display:block;
    height: 0px;
    background: rgba(0, 0, 0, 0.7);
    transition:height 300ms ease;
    overflow: hidden;
  }
  .main-header .dropdown .inner{
    display:flex;
    width: 940px;
    height: 240px;
    margin: 0 auto;
    padding: 15px 0px 30px  60px;
  }
  .dropdown .inner .inner-list {

  }
  .dropdown .inner .inner-list .item{
    height: 30px;
    line-height: 30px;
    display: block;
    width: 115px;
    padding: 2px 0 ;
    text-align: center;
    white-space: nowrap;
  }
  .inner .inner-list .item a:hover {
    color: #f3c258;
    text-decoration: underline;
  }

  .inner .inner-list .item .info{
    display:block;
    color:  rgb(255, 255, 249);
    font-size: 14px;
    text-align: center;
  }
  .inner .inner-list .item .info .icon-hot{
    display: inline-block;position: relative;
    top: -2px;
    width: 24px;
    height: 24px;
    vertical-align:middle;
    background: url(./images/main_index.png) no-repeat -136px -5px;
  }